
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>10 · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    
    <link rel="prev" href="../6/1.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    1
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../1/1.html">
            
                <a href="../1/1.html">
            
                    
                    2
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../1/2.html">
            
                <a href="../1/2.html">
            
                    
                    3
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../1/3.html">
            
                <a href="../1/3.html">
            
                    
                    4
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../2/1.html">
            
                <a href="../2/1.html">
            
                    
                    5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../3/1.html">
            
                <a href="../3/1.html">
            
                    
                    6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../4/1.html">
            
                <a href="../4/1.html">
            
                    
                    7
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../5/1.html">
            
                <a href="../5/1.html">
            
                    
                    8
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../6/1.html">
            
                <a href="../6/1.html">
            
                    
                    9
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.10" data-path="1.html">
            
                <a href="1.html">
            
                    
                    10
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >10</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="css&#x9AD8;&#x7EA7;&#x6280;&#x5DE7;">CSS&#x9AD8;&#x7EA7;&#x6280;&#x5DE7;</h1>
<p><strong>&#x76EE;&#x6807;</strong></p>
<ul>
<li>&#x7406;&#x89E3;<ul>
<li>&#x80FD;&#x8BF4;&#x51FA;&#x5143;&#x7D20;&#x663E;&#x793A;&#x9690;&#x85CF;&#x6700;&#x5E38;&#x89C1;&#x7684;&#x5199;&#x6CD5;</li>
<li>&#x80FD;&#x8BF4;&#x51FA;&#x7CBE;&#x7075;&#x56FE;&#x4EA7;&#x751F;&#x7684;&#x76EE;&#x7684;</li>
<li>&#x80FD;&#x8BF4;&#x51FA;&#x53BB;&#x9664;&#x56FE;&#x7247;&#x5E95;&#x4FA7;&#x7A7A;&#x767D;&#x7F1D;&#x9699;&#x7684;&#x65B9;&#x6CD5;</li>
</ul>
</li>
<li>&#x5E94;&#x7528;<ul>
<li>&#x80FD;&#x5199;&#x51FA;&#x6700;&#x5E38;&#x89C1;&#x7684;&#x9F20;&#x6807;&#x6837;&#x5F0F;</li>
<li>&#x80FD;&#x4F7F;&#x7528;&#x7CBE;&#x7075;&#x56FE;&#x6280;&#x672F;</li>
<li>&#x80FD;&#x7528;&#x6ED1;&#x52A8;&#x95E8;&#x505A;&#x5BFC;&#x822A;&#x680F;&#x6848;&#x4F8B;</li>
</ul>
</li>
</ul>
<h2 id="1-&#x5143;&#x7D20;&#x7684;&#x663E;&#x793A;&#x4E0E;&#x9690;&#x85CF;">1. &#x5143;&#x7D20;&#x7684;&#x663E;&#x793A;&#x4E0E;&#x9690;&#x85CF;</h2>
<ul>
<li><p>&#x76EE;&#x7684;</p>
<p>&#x8BA9;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x6D88;&#x5931;&#x6216;&#x8005;&#x663E;&#x793A;&#x51FA;&#x6765;</p>
</li>
<li><p>&#x573A;&#x666F;</p>
<p>&#x7C7B;&#x4F3C;&#x7F51;&#x7AD9;&#x5E7F;&#x544A;&#xFF0C;&#x5F53;&#x6211;&#x4EEC;&#x70B9;&#x51FB;&#x5173;&#x95ED;&#x5C31;&#x4E0D;&#x89C1;&#x4E86;&#xFF0C;&#x4F46;&#x662F;&#x6211;&#x4EEC;&#x91CD;&#x65B0;&#x5237;&#x65B0;&#x9875;&#x9762;&#xFF0C;&#x4F1A;&#x91CD;&#x65B0;&#x51FA;&#x73B0;&#xFF01;</p>
</li>
</ul>
<h3 id="11-display-&#x663E;&#x793A;&#xFF08;&#x91CD;&#x70B9;&#xFF09;">1.1 display &#x663E;&#x793A;&#xFF08;&#x91CD;&#x70B9;&#xFF09;</h3>
<ul>
<li><p>display &#x8BBE;&#x7F6E;&#x6216;&#x68C0;&#x7D22;&#x5BF9;&#x8C61;&#x662F;&#x5426;&#x53CA;&#x5982;&#x4F55;&#x663E;&#x793A;&#x3002;</p>
<pre><code>display: none &#x9690;&#x85CF;&#x5BF9;&#x8C61;

display&#xFF1A;block &#x9664;&#x4E86;&#x8F6C;&#x6362;&#x4E3A;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x4E4B;&#x5916;&#xFF0C;&#x540C;&#x65F6;&#x8FD8;&#x6709;&#x663E;&#x793A;&#x5143;&#x7D20;&#x7684;&#x610F;&#x601D;&#x3002;
</code></pre></li>
<li><p>&#x7279;&#x70B9;&#xFF1A; &#x9690;&#x85CF;&#x4E4B;&#x540E;&#xFF0C;&#x4E0D;&#x518D;&#x4FDD;&#x7559;&#x4F4D;&#x7F6E;&#x3002;</p>
</li>
</ul>
<p>&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x573A;&#x666F;&#xFF1A;</p>
<blockquote>
<p>&#x914D;&#x5408;&#x540E;&#x9762;js&#x505A;&#x7279;&#x6548;&#xFF0C;&#x6BD4;&#x5982;&#x4E0B;&#x62C9;&#x83DC;&#x5355;&#xFF0C;&#x539F;&#x5148;&#x6CA1;&#x6709;&#xFF0C;&#x9F20;&#x6807;&#x7ECF;&#x8FC7;&#xFF0C;&#x663E;&#x793A;&#x4E0B;&#x62C9;&#x83DC;&#x5355;&#xFF0C; &#x5E94;&#x7528;&#x6781;&#x4E3A;&#x5E7F;&#x6CDB;</p>
</blockquote>
<h3 id="12-visibility-&#x53EF;&#x89C1;&#x6027;-&#x4E86;&#x89E3;">1.2 visibility &#x53EF;&#x89C1;&#x6027; (&#x4E86;&#x89E3;)</h3>
<ul>
<li><p>&#x8BBE;&#x7F6E;&#x6216;&#x68C0;&#x7D22;&#x662F;&#x5426;&#x663E;&#x793A;&#x5BF9;&#x8C61;&#x3002;</p>
<pre><code>visibility&#xFF1A;visible ; &#x3000;&#x5BF9;&#x8C61;&#x53EF;&#x89C6;

visibility&#xFF1A;hidden; &#x3000;  &#x5BF9;&#x8C61;&#x9690;&#x85CF;
</code></pre></li>
<li><p>&#x7279;&#x70B9;&#xFF1A; &#x9690;&#x85CF;&#x4E4B;&#x540E;&#xFF0C;&#x7EE7;&#x7EED;&#x4FDD;&#x7559;&#x539F;&#x6709;&#x4F4D;&#x7F6E;&#x3002;&#xFF08;&#x505C;&#x804C;&#x7559;&#x85AA;&#xFF09;</p>
</li>
</ul>
<h3 id="13-overflow-&#x6EA2;&#x51FA;&#x91CD;&#x70B9;">1.3 overflow &#x6EA2;&#x51FA;(&#x91CD;&#x70B9;)</h3>
<ul>
<li>&#x68C0;&#x7D22;&#x6216;&#x8BBE;&#x7F6E;&#x5F53;&#x5BF9;&#x8C61;&#x7684;&#x5185;&#x5BB9;&#x8D85;&#x8FC7;&#x5176;&#x6307;&#x5B9A;&#x9AD8;&#x5EA6;&#x53CA;&#x5BBD;&#x5EA6;&#x65F6;&#x5982;&#x4F55;&#x7BA1;&#x7406;&#x5185;&#x5BB9;&#x3002;</li>
</ul>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;&#x503C;</th>
<th>&#x63CF;&#x8FF0;</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>visible</strong></td>
<td>&#x4E0D;&#x526A;&#x5207;&#x5185;&#x5BB9;&#x4E5F;&#x4E0D;&#x6DFB;&#x52A0;&#x6EDA;&#x52A8;&#x6761;</td>
</tr>
<tr>
<td><strong>hidden</strong></td>
<td>&#x4E0D;&#x663E;&#x793A;&#x8D85;&#x8FC7;&#x5BF9;&#x8C61;&#x5C3A;&#x5BF8;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x8D85;&#x51FA;&#x7684;&#x90E8;&#x5206;&#x9690;&#x85CF;&#x6389;</td>
</tr>
<tr>
<td><strong>scroll</strong></td>
<td>&#x4E0D;&#x7BA1;&#x8D85;&#x51FA;&#x5185;&#x5BB9;&#x5426;&#xFF0C;&#x603B;&#x662F;&#x663E;&#x793A;&#x6EDA;&#x52A8;&#x6761;</td>
</tr>
<tr>
<td><strong>auto</strong></td>
<td>&#x8D85;&#x51FA;&#x81EA;&#x52A8;&#x663E;&#x793A;&#x6EDA;&#x52A8;&#x6761;&#xFF0C;&#x4E0D;&#x8D85;&#x51FA;&#x4E0D;&#x663E;&#x793A;&#x6EDA;&#x52A8;&#x6761;</td>
</tr>
</tbody>
</table>
<p>&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x573A;&#x666F;&#xFF1A;</p>
<ol>
<li>&#x6E05;&#x9664;&#x6D6E;&#x52A8;</li>
<li>&#x9690;&#x85CF;&#x8D85;&#x51FA;&#x5185;&#x5BB9;&#xFF0C;&#x9690;&#x85CF;&#x6389;,  &#x4E0D;&#x5141;&#x8BB8;&#x5185;&#x5BB9;&#x8D85;&#x8FC7;&#x7236;&#x76D2;&#x5B50;&#x3002;</li>
</ol>
<h3 id="14-&#x663E;&#x793A;&#x4E0E;&#x9690;&#x85CF;&#x603B;&#x7ED3;">1.4 &#x663E;&#x793A;&#x4E0E;&#x9690;&#x85CF;&#x603B;&#x7ED3;</h3>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;</th>
<th>&#x533A;&#x522B;</th>
<th>&#x7528;&#x9014;</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>display</strong></td>
<td>&#x9690;&#x85CF;&#x5BF9;&#x8C61;&#xFF0C;&#x4E0D;&#x4FDD;&#x7559;&#x4F4D;&#x7F6E;</td>
<td>&#x914D;&#x5408;&#x540E;&#x9762;js&#x505A;&#x7279;&#x6548;&#xFF0C;&#x6BD4;&#x5982;&#x4E0B;&#x62C9;&#x83DC;&#x5355;&#xFF0C;&#x539F;&#x5148;&#x6CA1;&#x6709;&#xFF0C;&#x9F20;&#x6807;&#x7ECF;&#x8FC7;&#xFF0C;&#x663E;&#x793A;&#x4E0B;&#x62C9;&#x83DC;&#x5355;&#xFF0C; &#x5E94;&#x7528;&#x6781;&#x4E3A;&#x5E7F;&#x6CDB;</td>
</tr>
<tr>
<td><strong>visibility</strong></td>
<td>&#x9690;&#x85CF;&#x5BF9;&#x8C61;&#xFF0C;&#x4FDD;&#x7559;&#x4F4D;&#x7F6E;</td>
<td>&#x4F7F;&#x7528;&#x8F83;&#x5C11;</td>
</tr>
<tr>
<td><strong>overflow</strong></td>
<td>&#x53EA;&#x662F;&#x9690;&#x85CF;&#x8D85;&#x51FA;&#x5927;&#x5C0F;&#x7684;&#x90E8;&#x5206;</td>
<td>1. &#x53EF;&#x4EE5;&#x6E05;&#x9664;&#x6D6E;&#x52A8; 2. &#x4FDD;&#x8BC1;&#x76D2;&#x5B50;&#x91CC;&#x9762;&#x7684;&#x5185;&#x5BB9;&#x4E0D;&#x4F1A;&#x8D85;&#x51FA;&#x8BE5;&#x76D2;&#x5B50;&#x8303;&#x56F4;</td>
</tr>
</tbody>
</table>
<h2 id="2-css&#x7528;&#x6237;&#x754C;&#x9762;&#x6837;&#x5F0F;">2. CSS&#x7528;&#x6237;&#x754C;&#x9762;&#x6837;&#x5F0F;</h2>
<ul>
<li>&#x6240;&#x8C13;&#x7684;&#x754C;&#x9762;&#x6837;&#x5F0F;&#xFF0C; &#x5C31;&#x662F;&#x66F4;&#x6539;&#x4E00;&#x4E9B;&#x7528;&#x6237;&#x64CD;&#x4F5C;&#x6837;&#x5F0F;&#xFF0C;&#x4EE5;&#x4FBF;&#x63D0;&#x9AD8;&#x66F4;&#x597D;&#x7684;&#x7528;&#x6237;&#x4F53;&#x9A8C;&#x3002;<ul>
<li>&#x66F4;&#x6539;&#x7528;&#x6237;&#x7684;&#x9F20;&#x6807;&#x6837;&#x5F0F; (&#x6EDA;&#x52A8;&#x6761;&#x56E0;&#x4E3A;&#x517C;&#x5BB9;&#x6027;&#x975E;&#x5E38;&#x5DEE;&#xFF0C;&#x6211;&#x4EEC;&#x4E0D;&#x7814;&#x7A76;) </li>
<li>&#x8868;&#x5355;&#x8F6E;&#x5ED3;&#x7B49;&#x3002;</li>
<li>&#x9632;&#x6B62;&#x8868;&#x5355;&#x57DF;&#x62D6;&#x62FD;</li>
</ul>
</li>
</ul>
<h3 id="21-&#x9F20;&#x6807;&#x6837;&#x5F0F;cursor">2.1 &#x9F20;&#x6807;&#x6837;&#x5F0F;cursor</h3>
<p> &#x8BBE;&#x7F6E;&#x6216;&#x68C0;&#x7D22;&#x5728;&#x5BF9;&#x8C61;&#x4E0A;&#x79FB;&#x52A8;&#x7684;&#x9F20;&#x6807;&#x6307;&#x9488;&#x91C7;&#x7528;&#x4F55;&#x79CD;&#x7CFB;&#x7EDF;&#x9884;&#x5B9A;&#x4E49;&#x7684;&#x5149;&#x6807;&#x5F62;&#x72B6;&#x3002;</p>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;&#x503C;</th>
<th>&#x63CF;&#x8FF0;</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>default</strong></td>
<td>&#x5C0F;&#x767D;  &#x9ED8;&#x8BA4;</td>
</tr>
<tr>
<td><strong>pointer</strong></td>
<td>&#x5C0F;&#x624B;</td>
</tr>
<tr>
<td><strong>move</strong></td>
<td>&#x79FB;&#x52A8;</td>
</tr>
<tr>
<td><strong>text</strong></td>
<td>&#x6587;&#x672C;</td>
</tr>
<tr>
<td><strong>not-allowed</strong></td>
<td>&#x7981;&#x6B62;</td>
</tr>
</tbody>
</table>
<p> &#x9F20;&#x6807;&#x653E;&#x6211;&#x8EAB;&#x4E0A;&#x67E5;&#x770B;&#x6548;&#x679C;&#x54E6;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;cursor:default&quot;</span>&gt;</span>&#x6211;&#x662F;&#x5C0F;&#x767D;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;cursor:pointer&quot;</span>&gt;</span>&#x6211;&#x662F;&#x5C0F;&#x624B;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;cursor:move&quot;</span>&gt;</span>&#x6211;&#x662F;&#x79FB;&#x52A8;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;cursor:text&quot;</span>&gt;</span>&#x6211;&#x662F;&#x6587;&#x672C;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;cursor:not-allowed&quot;</span>&gt;</span>&#x6211;&#x662F;&#x6587;&#x672C;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
</code></pre>
<h3 id="22-&#x8F6E;&#x5ED3;&#x7EBF;-outline">2.2 &#x8F6E;&#x5ED3;&#x7EBF; outline</h3>
<p> &#x662F;&#x7ED8;&#x5236;&#x4E8E;&#x5143;&#x7D20;&#x5468;&#x56F4;&#x7684;&#x4E00;&#x6761;&#x7EBF;&#xFF0C;&#x4F4D;&#x4E8E;&#x8FB9;&#x6846;&#x8FB9;&#x7F18;&#x7684;&#x5916;&#x56F4;&#xFF0C;&#x53EF;&#x8D77;&#x5230;&#x7A81;&#x51FA;&#x5143;&#x7D20;&#x7684;&#x4F5C;&#x7528;&#x3002; </p>
<pre><code class="lang-css"> outline : outline-color ||outline-style || outline-width
</code></pre>
<p> &#x4F46;&#x662F;&#x6211;&#x4EEC;&#x90FD;&#x4E0D;&#x5173;&#x5FC3;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x591A;&#x5C11;&#xFF0C;&#x6211;&#x4EEC;&#x5E73;&#x65F6;&#x90FD;&#x662F;&#x53BB;&#x6389;&#x7684;&#x3002; li  </p>
<p>&#x6700;&#x76F4;&#x63A5;&#x7684;&#x5199;&#x6CD5;&#x662F; &#xFF1A;  outline: 0;   &#x6216;&#x8005;  outline: none;</p>
<pre><code class="lang-html"> <span class="hljs-tag">&lt;<span class="hljs-name">input</span>  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>  <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;outline: 0;&quot;</span>/&gt;</span>
</code></pre>
<h3 id="23-&#x9632;&#x6B62;&#x62D6;&#x62FD;&#x6587;&#x672C;&#x57DF;resize">2.3 &#x9632;&#x6B62;&#x62D6;&#x62FD;&#x6587;&#x672C;&#x57DF;resize</h3>
<p>&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x6587;&#x672C;&#x57DF;&#x53F3;&#x4E0B;&#x89D2;&#x662F;&#x4E0D;&#x53EF;&#x4EE5;&#x62D6;&#x62FD;&#xFF1A; </p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">textarea</span>  <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;resize: none;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
</code></pre>
<h3 id="24-&#x7528;&#x6237;&#x754C;&#x9762;&#x6837;&#x5F0F;&#x603B;&#x7ED3;">2.4 &#x7528;&#x6237;&#x754C;&#x9762;&#x6837;&#x5F0F;&#x603B;&#x7ED3;</h3>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;</th>
<th>&#x7528;&#x9014;</th>
<th>&#x7528;&#x9014;</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>&#x9F20;&#x6807;&#x6837;&#x5F0F;</strong></td>
<td>&#x66F4;&#x6539;&#x9F20;&#x6807;&#x6837;&#x5F0F;cursor</td>
<td>&#x6837;&#x5F0F;&#x5F88;&#x591A;&#xFF0C;&#x91CD;&#x70B9;&#x8BB0;&#x4F4F; pointer</td>
</tr>
<tr>
<td><strong>&#x8F6E;&#x5ED3;&#x7EBF;</strong></td>
<td>&#x8868;&#x5355;&#x9ED8;&#x8BA4;outline</td>
<td>outline &#x8F6E;&#x5ED3;&#x7EBF;&#xFF0C;&#x6211;&#x4EEC;&#x4E00;&#x822C;&#x76F4;&#x63A5;&#x53BB;&#x6389;&#xFF0C;border&#x662F;&#x8FB9;&#x6846;&#xFF0C;&#x6211;&#x4EEC;&#x4F1A;&#x7ECF;&#x5E38;&#x7528;</td>
</tr>
<tr>
<td>&#x9632;&#x6B62;&#x62D6;&#x62FD;</td>
<td>&#x4E3B;&#x8981;&#x9488;&#x5BF9;&#x6587;&#x672C;&#x57DF;resize</td>
<td>&#x9632;&#x6B62;&#x7528;&#x6237;&#x968F;&#x610F;&#x62D6;&#x62FD;&#x6587;&#x672C;&#x57DF;&#xFF0C;&#x9020;&#x6210;&#x9875;&#x9762;&#x5E03;&#x5C40;&#x6DF7;&#x4E71;&#xFF0C;&#x6211;&#x4EEC;resize:none</td>
</tr>
</tbody>
</table>
<h2 id="3-vertical-align-&#x5782;&#x76F4;&#x5BF9;&#x9F50;">3. vertical-align &#x5782;&#x76F4;&#x5BF9;&#x9F50;</h2>
<ul>
<li>&#x6709;&#x5BBD;&#x5EA6;&#x7684;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x5C45;&#x4E2D;&#x5BF9;&#x9F50;&#xFF0C;&#x662F;margin: 0 auto;</li>
<li>&#x8BA9;&#x6587;&#x5B57;&#x5C45;&#x4E2D;&#x5BF9;&#x9F50;&#xFF0C;&#x662F; text-align: center;</li>
</ul>
<p>&#x4F46;&#x662F;&#x6211;&#x4EEC;&#x4ECE;&#x6765;&#x6CA1;&#x6709;&#x8BB2;&#x8FC7;&#x6709;&#x5782;&#x76F4;&#x5C45;&#x4E2D;&#x7684;&#x5C5E;&#x6027;&#x3002;</p>
<p>vertical-align &#x5782;&#x76F4;&#x5BF9;&#x9F50;&#xFF0C;&#x5B83;&#x53EA;&#x9488;&#x5BF9;&#x4E8E;<strong>&#x884C;&#x5185;&#x5143;&#x7D20;</strong>&#x6216;&#x8005;<strong>&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;</strong>&#xFF0C;</p>
<pre><code class="lang-css">vertical-align : baseline |top |middle |bottom
</code></pre>
<p>&#x8BBE;&#x7F6E;&#x6216;&#x68C0;&#x7D22;&#x5BF9;&#x8C61;&#x5185;&#x5BB9;&#x7684;&#x5782;&#x76F4;&#x5BF9;&#x5176;&#x65B9;&#x5F0F;&#x3002;</p>
<ul>
<li><p>&#x6CE8;&#x610F;&#xFF1A;</p>
<p>vertical-align &#x4E0D;&#x5F71;&#x54CD;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x4E2D;&#x7684;&#x5185;&#x5BB9;&#x5BF9;&#x9F50;&#xFF0C;&#x5B83;&#x53EA;&#x9488;&#x5BF9;&#x4E8E;<strong>&#x884C;&#x5185;&#x5143;&#x7D20;</strong>&#x6216;&#x8005;<strong>&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;</strong>&#xFF0C;</p>
<p>&#x7279;&#x522B;&#x662F;&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;&#xFF0C; <strong>&#x901A;&#x5E38;&#x7528;&#x6765;&#x63A7;&#x5236;&#x56FE;&#x7247;/&#x8868;&#x5355;&#x4E0E;&#x6587;&#x5B57;&#x7684;&#x5BF9;&#x9F50;</strong>&#x3002;</p>
</li>
</ul>
<h3 id="31-&#x56FE;&#x7247;&#x3001;&#x8868;&#x5355;&#x548C;&#x6587;&#x5B57;&#x5BF9;&#x9F50;">3.1 &#x56FE;&#x7247;&#x3001;&#x8868;&#x5355;&#x548C;&#x6587;&#x5B57;&#x5BF9;&#x9F50;</h3>
<p>&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x77E5;&#x9053;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;vertical-align &#x63A7;&#x5236;&#x56FE;&#x7247;&#x548C;&#x6587;&#x5B57;&#x7684;&#x5782;&#x76F4;&#x5173;&#x7CFB;&#x4E86;&#x3002; &#x9ED8;&#x8BA4;&#x7684;&#x56FE;&#x7247;&#x4F1A;&#x548C;&#x6587;&#x5B57;&#x57FA;&#x7EBF;&#x5BF9;&#x9F50;&#x3002;</p>
<p><img src="media/1498467742995.png" alt="1498467742995"></p>
<h3 id="32-&#x53BB;&#x9664;&#x56FE;&#x7247;&#x5E95;&#x4FA7;&#x7A7A;&#x767D;&#x7F1D;&#x9699;">3.2 &#x53BB;&#x9664;&#x56FE;&#x7247;&#x5E95;&#x4FA7;&#x7A7A;&#x767D;&#x7F1D;&#x9699;</h3>
<ul>
<li><p>&#x539F;&#x56E0;&#xFF1A;</p>
<p>&#x56FE;&#x7247;&#x6216;&#x8005;&#x8868;&#x5355;&#x7B49;&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;&#xFF0C;&#x4ED6;&#x7684;&#x5E95;&#x7EBF;&#x4F1A;&#x548C;&#x7236;&#x7EA7;&#x76D2;&#x5B50;&#x7684;&#x57FA;&#x7EBF;&#x5BF9;&#x9F50;&#x3002;</p>
<p>&#x5C31;&#x662F;&#x56FE;&#x7247;&#x5E95;&#x4FA7;&#x4F1A;&#x6709;&#x4E00;&#x4E2A;&#x7A7A;&#x767D;&#x7F1D;&#x9699;&#x3002;</p>
</li>
<li><p>&#x89E3;&#x51B3;&#x7684;&#x65B9;&#x6CD5;&#x5C31;&#x662F;&#xFF1A;  </p>
<ul>
<li><p>&#x7ED9;img vertical-align:middle | top| bottom&#x7B49;&#x7B49;&#x3002;  &#x8BA9;&#x56FE;&#x7247;&#x4E0D;&#x8981;&#x548C;&#x57FA;&#x7EBF;&#x5BF9;&#x9F50;&#x3002;</p>
<p>&#x200B;</p>
</li>
<li><p>&#x7ED9;img &#x6DFB;&#x52A0; display&#xFF1A;block; &#x8F6C;&#x6362;&#x4E3A;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x5C31;&#x4E0D;&#x4F1A;&#x5B58;&#x5728;&#x95EE;&#x9898;&#x4E86;&#x3002;</p>
</li>
</ul>
</li>
</ul>
<h2 id="4-&#x6EA2;&#x51FA;&#x7684;&#x6587;&#x5B57;&#x7701;&#x7565;&#x53F7;&#x663E;&#x793A;">4. &#x6EA2;&#x51FA;&#x7684;&#x6587;&#x5B57;&#x7701;&#x7565;&#x53F7;&#x663E;&#x793A;</h2>
<h3 id="41-white-space">4.1 white-space</h3>
<ul>
<li>white-space&#x8BBE;&#x7F6E;&#x6216;&#x68C0;&#x7D22;&#x5BF9;&#x8C61;&#x5185;&#x6587;&#x672C;&#x663E;&#x793A;&#x65B9;&#x5F0F;&#x3002;&#x901A;&#x5E38;&#x6211;&#x4EEC;&#x4F7F;&#x7528;&#x4E8E;&#x5F3A;&#x5236;&#x4E00;&#x884C;&#x663E;&#x793A;&#x5185;&#x5BB9; </li>
</ul>
<pre><code>white-space:normal &#xFF1B;&#x9ED8;&#x8BA4;&#x5904;&#x7406;&#x65B9;&#x5F0F;

white-space:nowrap &#xFF1B;&#x3000;&#x5F3A;&#x5236;&#x5728;&#x540C;&#x4E00;&#x884C;&#x5185;&#x663E;&#x793A;&#x6240;&#x6709;&#x6587;&#x672C;&#xFF0C;&#x76F4;&#x5230;&#x6587;&#x672C;&#x7ED3;&#x675F;&#x6216;&#x8005;&#x906D;&#x9047;br&#x6807;&#x7B7E;&#x5BF9;&#x8C61;&#x624D;&#x6362;&#x884C;&#x3002;
</code></pre><h3 id="42-text-overflow-&#x6587;&#x5B57;&#x6EA2;&#x51FA;">4.2 text-overflow &#x6587;&#x5B57;&#x6EA2;&#x51FA;</h3>
<ul>
<li>&#x8BBE;&#x7F6E;&#x6216;&#x68C0;&#x7D22;&#x662F;&#x5426;&#x4F7F;&#x7528;&#x4E00;&#x4E2A;&#x7701;&#x7565;&#x6807;&#x8BB0;&#xFF08;...&#xFF09;&#x6807;&#x793A;&#x5BF9;&#x8C61;&#x5185;&#x6587;&#x672C;&#x7684;&#x6EA2;&#x51FA;</li>
</ul>
<pre><code>text-overflow : clip &#xFF1B;&#x4E0D;&#x663E;&#x793A;&#x7701;&#x7565;&#x6807;&#x8BB0;&#xFF08;...&#xFF09;&#xFF0C;&#x800C;&#x662F;&#x7B80;&#x5355;&#x7684;&#x88C1;&#x5207; 

text-overflow&#xFF1A;ellipsis &#xFF1B; &#x5F53;&#x5BF9;&#x8C61;&#x5185;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x65F6;&#x663E;&#x793A;&#x7701;&#x7565;&#x6807;&#x8BB0;&#xFF08;...&#xFF09;
</code></pre><p><strong>&#x6CE8;&#x610F;</strong>&#xFF1A;</p>
<p>&#x4E00;&#x5B9A;&#x8981;&#x9996;&#x5148;&#x5F3A;&#x5236;&#x4E00;&#x884C;&#x5185;&#x663E;&#x793A;&#xFF0C;&#x518D;&#x6B21;&#x548C;overflow&#x5C5E;&#x6027;  &#x642D;&#x914D;&#x4F7F;&#x7528;</p>
<h3 id="43-&#x603B;&#x7ED3;&#x4E09;&#x6B65;&#x66F2;">4.3 &#x603B;&#x7ED3;&#x4E09;&#x6B65;&#x66F2;</h3>
<pre><code class="lang-css">  <span class="hljs-comment">/*1. &#x5148;&#x5F3A;&#x5236;&#x4E00;&#x884C;&#x5185;&#x663E;&#x793A;&#x6587;&#x672C;*/</span>
      <span class="hljs-selector-tag">white-space</span>: <span class="hljs-selector-tag">nowrap</span>;
  <span class="hljs-comment">/*2. &#x8D85;&#x51FA;&#x7684;&#x90E8;&#x5206;&#x9690;&#x85CF;*/</span>
      <span class="hljs-selector-tag">overflow</span>: <span class="hljs-selector-tag">hidden</span>;
  <span class="hljs-comment">/*3. &#x6587;&#x5B57;&#x7528;&#x7701;&#x7565;&#x53F7;&#x66FF;&#x4EE3;&#x8D85;&#x51FA;&#x7684;&#x90E8;&#x5206;*/</span>
      <span class="hljs-selector-tag">text-overflow</span>: <span class="hljs-selector-tag">ellipsis</span>;
</code></pre>
<h2 id="5-css&#x7CBE;&#x7075;&#x6280;&#x672F;&#xFF08;sprite-&#x91CD;&#x70B9;">5. CSS&#x7CBE;&#x7075;&#x6280;&#x672F;&#xFF08;sprite) &#x91CD;&#x70B9;</h2>
<h3 id="51-&#x4E3A;&#x4EC0;&#x4E48;&#x9700;&#x8981;&#x7CBE;&#x7075;&#x6280;&#x672F;">5.1 &#x4E3A;&#x4EC0;&#x4E48;&#x9700;&#x8981;&#x7CBE;&#x7075;&#x6280;&#x672F;</h3>
<p>&#x56FE;&#x6240;&#x793A;&#x4E3A;&#x7F51;&#x9875;&#x7684;&#x8BF7;&#x6C42;&#x539F;&#x7406;&#x56FE;&#xFF0C;&#x5F53;&#x7528;&#x6237;&#x8BBF;&#x95EE;&#x4E00;&#x4E2A;&#x7F51;&#x7AD9;&#x65F6;&#xFF0C;&#x9700;&#x8981;&#x5411;&#x670D;&#x52A1;&#x5668;&#x53D1;&#x9001;&#x8BF7;&#x6C42;&#xFF0C;&#x7F51;&#x9875;&#x4E0A;&#x7684;&#x6BCF;&#x5F20;&#x56FE;&#x50CF;&#x90FD;&#x8981;&#x7ECF;&#x8FC7;&#x4E00;&#x6B21;&#x8BF7;&#x6C42;&#x624D;&#x80FD;&#x5C55;&#x73B0;&#x7ED9;&#x7528;&#x6237;&#x3002;</p>
<p>&#x7136;&#x800C;&#xFF0C;&#x4E00;&#x4E2A;&#x7F51;&#x9875;&#x4E2D;&#x5F80;&#x5F80;&#x4F1A;&#x5E94;&#x7528;&#x5F88;&#x591A;&#x5C0F;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x4F5C;&#x4E3A;&#x4FEE;&#x9970;&#xFF0C;&#x5F53;&#x7F51;&#x9875;&#x4E2D;&#x7684;&#x56FE;&#x50CF;&#x8FC7;&#x591A;&#x65F6;&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x5C31;&#x4F1A;&#x9891;&#x7E41;&#x5730;&#x63A5;&#x53D7;&#x548C;&#x53D1;&#x9001;&#x8BF7;&#x6C42;&#xFF0C;&#x8FD9;&#x5C06;&#x5927;&#x5927;&#x964D;&#x4F4E;&#x9875;&#x9762;&#x7684;&#x52A0;&#x8F7D;&#x901F;&#x5EA6;&#x3002;</p>
<p><strong>pink&#x8001;&#x5E08;&#x544A;&#x8BC9;&#x4F60;&#x6211;&#x4EEC;&#x4E3A;&#x4EC0;&#x4E48;&#x9700;&#x8981;&#x7CBE;&#x7075;&#x6280;&#x672F;&#xFF1A;</strong></p>
<blockquote>
<p> <strong>&#x4E3A;&#x4E86;&#x6709;&#x6548;&#x5730;&#x51CF;&#x5C11;&#x670D;&#x52A1;&#x5668;&#x63A5;&#x53D7;&#x548C;&#x53D1;&#x9001;&#x8BF7;&#x6C42;&#x7684;&#x6B21;&#x6570;&#xFF0C;&#x63D0;&#x9AD8;&#x9875;&#x9762;&#x7684;&#x52A0;&#x8F7D;&#x901F;&#x5EA6;&#x3002;</strong></p>
</blockquote>
<p>&#x51FA;&#x73B0;&#x4E86;CSS&#x7CBE;&#x7075;&#x6280;&#x672F;&#xFF08;&#x4E5F;&#x79F0;CSS Sprites&#x3001;CSS&#x96EA;&#x78A7;&#xFF09;&#x3002;</p>
<h3 id="52-&#x7CBE;&#x7075;&#x6280;&#x672F;&#x8BB2;&#x89E3;">5.2 &#x7CBE;&#x7075;&#x6280;&#x672F;&#x8BB2;&#x89E3;</h3>
<p>CSS &#x7CBE;&#x7075;&#x5176;&#x5B9E;&#x662F;&#x5C06;&#x7F51;&#x9875;&#x4E2D;&#x7684;&#x4E00;&#x4E9B;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x6574;&#x5408;&#x5230;&#x4E00;&#x5F20;&#x5927;&#x56FE;&#x4E2D;&#xFF08;&#x7CBE;&#x7075;&#x56FE;&#xFF09;&#xFF0C;&#x7136;&#x800C;&#xFF0C;&#x5404;&#x4E2A;&#x7F51;&#x9875;&#x5143;&#x7D20;&#x901A;&#x5E38;&#x53EA;&#x9700;&#x8981;&#x7CBE;&#x7075;&#x56FE;&#x4E2D;&#x4E0D;&#x540C;&#x4F4D;&#x7F6E;&#x7684;&#x67D0;&#x4E2A;&#x5C0F;&#x56FE;&#xFF0C;&#x8981;&#x60F3;&#x7CBE;&#x786E;&#x5B9A;&#x4F4D;&#x5230;&#x7CBE;&#x7075;&#x56FE;&#x4E2D;&#x7684;&#x67D0;&#x4E2A;&#x5C0F;&#x56FE;&#x3002;</p>
<p>&#x8FD9;&#x6837;&#xFF0C;&#x5F53;&#x7528;&#x6237;&#x8BBF;&#x95EE;&#x8BE5;&#x9875;&#x9762;&#x65F6;&#xFF0C;&#x53EA;&#x9700;&#x5411;&#x670D;&#x52A1;&#x53D1;&#x9001;&#x4E00;&#x6B21;&#x8BF7;&#x6C42;&#xFF0C;&#x7F51;&#x9875;&#x4E2D;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x5373;&#x53EF;&#x5168;&#x90E8;&#x5C55;&#x793A;&#x51FA;&#x6765;&#x3002;</p>
<p>&#x6211;&#x4EEC;&#x9700;&#x8981;&#x4F7F;&#x7528;CSS&#x7684;</p>
<ul>
<li>background-image&#x3001;</li>
<li>background-repeat</li>
<li>background-position&#x5C5E;&#x6027;&#x8FDB;&#x884C;&#x80CC;&#x666F;&#x5B9A;&#x4F4D;&#xFF0C;</li>
<li>&#x5176;&#x4E2D;&#x6700;&#x5173;&#x952E;&#x7684;&#x662F;&#x4F7F;&#x7528;background-position &#x5C5E;&#x6027;&#x7CBE;&#x786E;&#x5730;&#x5B9A;&#x4F4D;&#x3002;</li>
</ul>
<h3 id="53-&#x7CBE;&#x7075;&#x6280;&#x672F;&#x4F7F;&#x7528;&#x7684;&#x6838;&#x5FC3;&#x603B;&#x7ED3;">5.3 &#x7CBE;&#x7075;&#x6280;&#x672F;&#x4F7F;&#x7528;&#x7684;&#x6838;&#x5FC3;&#x603B;&#x7ED3;</h3>
<p>&#x9996;&#x5148;&#x6211;&#x4EEC;&#x77E5;&#x9053;&#xFF0C;css&#x7CBE;&#x7075;&#x6280;&#x672F;&#x4E3B;&#x8981;&#x9488;&#x5BF9;&#x4E8E;&#x80CC;&#x666F;&#x56FE;&#x7247;&#xFF0C;&#x63D2;&#x5165;&#x7684;&#x56FE;&#x7247;img &#x662F;&#x4E0D;&#x9700;&#x8981;&#x8FD9;&#x4E2A;&#x6280;&#x672F;&#x7684;&#x3002;</p>
<ol>
<li>&#x7CBE;&#x786E;&#x6D4B;&#x91CF;&#xFF0C;&#x6BCF;&#x4E2A;&#x5C0F;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x7684;&#x5927;&#x5C0F;&#x548C; &#x4F4D;&#x7F6E;&#x3002;</li>
<li>&#x7ED9;&#x76D2;&#x5B50;&#x6307;&#x5B9A;&#x5C0F;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x65F6;&#xFF0C; &#x80CC;&#x666F;&#x5B9A;&#x4F4D;&#x57FA;&#x672C;&#x90FD;&#x662F; &#x8D1F;&#x503C;&#x3002;</li>
</ol>
<h3 id="54-&#x5236;&#x4F5C;&#x7CBE;&#x7075;&#x56FE;&#x4E86;&#x89E3;">5.4 &#x5236;&#x4F5C;&#x7CBE;&#x7075;&#x56FE;(&#x4E86;&#x89E3;)</h3>
<p>CSS &#x7CBE;&#x7075;&#x5176;&#x5B9E;&#x662F;&#x5C06;&#x7F51;&#x9875;&#x4E2D;&#x7684;&#x4E00;&#x4E9B;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x6574;&#x5408;&#x5230;&#x4E00;&#x5F20;&#x5927;&#x56FE;&#x4E2D;&#xFF08;&#x7CBE;&#x7075;&#x56FE;&#xFF09;&#xFF0C;&#x90A3;&#x6211;&#x4EEC;&#x8981;&#x505A;&#x7684;&#xFF0C;&#x5C31;&#x662F;&#x628A;&#x5C0F;&#x56FE;&#x62FC;&#x5408;&#x6210;&#x4E00;&#x5F20;&#x5927;&#x56FE;&#x3002;</p>
<p>&#x5927;&#x90E8;&#x5206;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x7CBE;&#x7075;&#x56FE;&#x90FD;&#x662F;&#x7F51;&#x9875;&#x7F8E;&#x5DE5;&#x505A;&#x3002;</p>
<pre><code>&#x6211;&#x4EEC;&#x7CBE;&#x7075;&#x56FE;&#x4E0A;&#x653E;&#x7684;&#x90FD;&#x662F;&#x5C0F;&#x7684;&#x88C5;&#x9970;&#x6027;&#x8D28;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x3002; &#x63D2;&#x5165;&#x56FE;&#x7247;&#x4E0D;&#x80FD;&#x5F80;&#x4E0A;&#x653E;&#x3002;
&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x6A2A;&#x5411;&#x6446;&#x653E;&#x4E5F;&#x53EF;&#x4EE5;&#x7EB5;&#x5411;&#x6446;&#x653E;&#xFF0C;&#x4F46;&#x662F;&#x6BCF;&#x4E2A;&#x56FE;&#x7247;&#x4E4B;&#x95F4;&#x7559;&#x6709;&#x9002;&#x5F53;&#x7684;&#x7A7A;&#x9699;
&#x5728;&#x6211;&#x4EEC;&#x7CBE;&#x7075;&#x56FE;&#x7684;&#x6700;&#x4F4E;&#x7AEF;&#xFF0C;&#x7559;&#x4E00;&#x7247;&#x7A7A;&#x9699;&#xFF0C;&#x65B9;&#x4FBF;&#x6211;&#x4EEC;&#x4EE5;&#x540E;&#x6DFB;&#x52A0;&#x5176;&#x4ED6;&#x7CBE;&#x7075;&#x56FE;&#x3002;
</code></pre><p>&#x7ED3;&#x675F;&#x8BED;&#xFF1A;   &#x5C0F;&#x516C;&#x53F8;&#xFF0C;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x5F88;&#x5C11;&#x7684;&#x60C5;&#x51B5;&#xFF0C;&#x6CA1;&#x6709;&#x5FC5;&#x8981;&#x4F7F;&#x7528;&#x7CBE;&#x7075;&#x6280;&#x672F;&#xFF0C;&#x7EF4;&#x62A4;&#x6210;&#x672C;&#x592A;&#x9AD8;&#x3002; &#x5982;&#x679C;&#x662F;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x6BD4;&#x8F83;&#x591A;&#xFF0C;&#x53EF;&#x4EE5;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;&#x7CBE;&#x7075;&#x6280;&#x672F;&#x3002;</p>
<h2 id="6-&#x6ED1;&#x52A8;&#x95E8;">6. &#x6ED1;&#x52A8;&#x95E8;</h2>
<p>&#x5148;&#x6765;&#x4F53;&#x4F1A;&#x4E0B;&#x73B0;&#x5B9E;&#x4E2D;&#x7684;&#x6ED1;&#x52A8;&#x95E8;,&#x6216;&#x8005;&#x4F60;&#x53EF;&#x4EE5;&#x53EB;&#x505A;&#x63A8;&#x62C9;&#x95E8;&#xFF1A;</p>
<h3 id="&#x6ED1;&#x52A8;&#x95E8;&#x51FA;&#x73B0;&#x7684;&#x80CC;&#x666F;">&#x6ED1;&#x52A8;&#x95E8;&#x51FA;&#x73B0;&#x7684;&#x80CC;&#x666F;</h3>
<p>&#x5236;&#x4F5C;&#x7F51;&#x9875;&#x65F6;&#xFF0C;&#x4E3A;&#x4E86;&#x7F8E;&#x89C2;&#xFF0C;&#x5E38;&#x5E38;&#x9700;&#x8981;&#x4E3A;&#x7F51;&#x9875;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x7279;&#x6B8A;&#x5F62;&#x72B6;&#x7684;&#x80CC;&#x666F;&#xFF0C;&#x6BD4;&#x5982;&#x5FAE;&#x4FE1;&#x5BFC;&#x822A;&#x680F;&#xFF0C;&#x6709;&#x51F8;&#x8D77;&#x548C;&#x51F9;&#x4E0B;&#x53BB;&#x7684;&#x611F;&#x89C9;&#xFF0C;&#x6700;&#x5927;&#x7684;&#x95EE;&#x9898;&#x662F;&#x91CC;&#x9762;&#x7684;&#x5B57;&#x6570;&#x4E0D;&#x4E00;&#x6837;&#x591A;&#xFF0C;&#x548B;&#x529E;&#xFF1F;</p>
<p>&#x4E3A;&#x4E86;&#x4F7F;&#x5404;&#x79CD;&#x7279;&#x6B8A;&#x5F62;&#x72B6;&#x7684;&#x80CC;&#x666F;&#x80FD;&#x591F;&#x81EA;&#x9002;&#x5E94;&#x5143;&#x7D20;&#x4E2D;&#x6587;&#x672C;&#x5185;&#x5BB9;&#x7684;&#x591A;&#x5C11;&#xFF0C;&#x51FA;&#x73B0;&#x4E86;CSS&#x6ED1;&#x52A8;&#x95E8;&#x6280;&#x672F;&#x3002;&#x5B83;&#x4ECE;&#x65B0;&#x7684;&#x89D2;&#x5EA6;&#x6784;&#x5EFA;&#x9875;&#x9762;&#xFF0C;&#x4F7F;&#x5404;&#x79CD;&#x7279;&#x6B8A;&#x5F62;&#x72B6;&#x7684;&#x80CC;&#x666F;&#x80FD;&#x591F;&#x81EA;&#x7531;&#x62C9;&#x4F38;&#x6ED1;&#x52A8;&#xFF0C;&#x4EE5;&#x9002;&#x5E94;&#x5143;&#x7D20;&#x5185;&#x90E8;&#x7684;&#x6587;&#x672C;&#x5185;&#x5BB9;&#xFF0C;&#x53EF;&#x7528;&#x6027;&#x66F4;&#x5F3A;&#x3002; &#x6700;&#x5E38;&#x89C1;&#x4E8E;&#x5404;&#x79CD;&#x5BFC;&#x822A;&#x680F;&#x7684;&#x6ED1;&#x52A8;&#x95E8;&#x3002;</p>
<p><a href="http://weixin.qq.com/" target="_blank">http://weixin.qq.com/</a></p>
<h3 id="&#x6838;&#x5FC3;&#x6280;&#x672F;">&#x6838;&#x5FC3;&#x6280;&#x672F;</h3>
<p>&#x6838;&#x5FC3;&#x6280;&#x672F;&#x5C31;&#x662F;&#x5229;&#x7528;CSS&#x7CBE;&#x7075;&#xFF08;&#x4E3B;&#x8981;&#x662F;&#x80CC;&#x666F;&#x4F4D;&#x7F6E;&#xFF09;&#x548C; &#x76D2;&#x5B50;padding&#x6491;&#x5F00;&#x5BBD;&#x5EA6;, &#x4EE5;&#x4FBF;&#x80FD;&#x9002;&#x5E94;&#x4E0D;&#x540C;&#x5B57;&#x6570;&#x7684;&#x5BFC;&#x822A;&#x680F;&#x3002;</p>
<p>&#x4E00;&#x822C;&#x7684;&#x7ECF;&#x5178;&#x5E03;&#x5C40;&#x90FD;&#x662F;&#x8FD9;&#x6837;&#x7684;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>&#x5BFC;&#x822A;&#x680F;&#x5185;&#x5BB9;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</code></pre>
<p>css&#x6837;&#x5F0F;</p>
<pre><code class="lang-css">* {
      <span class="hljs-attribute">padding</span>:<span class="hljs-number">0</span>;
      <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>;

    }
    <span class="hljs-selector-tag">body</span>{
      <span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(images/wx.jpg) repeat-x;
    }
    <span class="hljs-selector-class">.father</span> {
      <span class="hljs-attribute">padding-top</span>:<span class="hljs-number">20px</span>;
    }
    <span class="hljs-selector-tag">li</span> {
      <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">16px</span>;
      <span class="hljs-attribute">height</span>: <span class="hljs-number">33px</span>;
      <span class="hljs-attribute">float</span>: left;
      <span class="hljs-attribute">line-height</span>: <span class="hljs-number">33px</span>;
      <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>  <span class="hljs-number">10px</span>;
      <span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(./images/to.png) no-repeat left ;
    }
    <span class="hljs-selector-tag">a</span> {
      <span class="hljs-attribute">padding-right</span>: <span class="hljs-number">16px</span>;
      <span class="hljs-attribute">height</span>: <span class="hljs-number">33px</span>;
      <span class="hljs-attribute">display</span>: inline-block;
      <span class="hljs-attribute">color</span>:<span class="hljs-number">#fff</span>;
      <span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(./images/to.png) no-repeat right ;
      <span class="hljs-attribute">text-decoration</span>: none;
    }
    <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:hover</span>,
     <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:hover</span> <span class="hljs-selector-tag">a</span> {
      <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">url</span>(./images/ao.png);
    }
</code></pre>
<p>&#x603B;&#x7ED3;&#xFF1A; </p>
<ol>
<li>a &#x8BBE;&#x7F6E; &#x80CC;&#x666F;&#x5DE6;&#x4FA7;&#xFF0C;padding&#x6491;&#x5F00;&#x5408;&#x9002;&#x5BBD;&#x5EA6;&#x3002;    </li>
<li>span &#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x53F3;&#x4FA7;&#xFF0C; padding&#x6491;&#x5F00;&#x5408;&#x9002;&#x5BBD;&#x5EA6; &#x5269;&#x4E0B;&#x7531;&#x6587;&#x5B57;&#x7EE7;&#x7EED;&#x6491;&#x5F00;&#x5BBD;&#x5EA6;&#x3002;</li>
<li>&#x4E4B;&#x6240;&#x4EE5;a&#x5305;&#x542B;span&#x5C31;&#x662F;&#x56E0;&#x4E3A; &#x6574;&#x4E2A;&#x5BFC;&#x822A;&#x90FD;&#x662F;&#x53EF;&#x4EE5;&#x70B9;&#x51FB;&#x7684;&#x3002;</li>
</ol>
<h2 id="7-&#x62D3;&#x5C55;">7. &#x62D3;&#x5C55;@</h2>
<h3 id="71-margin&#x8D1F;&#x503C;&#x4E4B;&#x7F8E;">7.1 margin&#x8D1F;&#x503C;&#x4E4B;&#x7F8E;</h3>
<h4 id="1-&#x8D1F;&#x8FB9;&#x8DDD;&#x5B9A;&#x4F4D;&#xFF1A;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;">1). &#x8D1F;&#x8FB9;&#x8DDD;+&#x5B9A;&#x4F4D;&#xFF1A;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;</h4>
<p>&#x54B1;&#x4EEC;&#x524D;&#x9762;&#x8BB2;&#x8FC7;&#xFF0C; &#x4E00;&#x4E2A;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50;&#xFF0C; &#x5229;&#x7528;  &#x7236;&#x7EA7;&#x76D2;&#x5B50;&#x7684; 50%&#xFF0C;  &#x7136;&#x540E; &#x5F80;&#x5DE6;(&#x4E0A;) &#x8D70; &#x81EA;&#x5DF1;&#x5BBD;&#x5EA6;&#x7684;&#x4E00;&#x534A; &#xFF0C;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x76D2;&#x5B50;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;&#x3002;</p>
<h4 id="2-&#x538B;&#x4F4F;&#x76D2;&#x5B50;&#x76F8;&#x90BB;&#x8FB9;&#x6846;">2). &#x538B;&#x4F4F;&#x76D2;&#x5B50;&#x76F8;&#x90BB;&#x8FB9;&#x6846;</h4>
<h3 id="72-css&#x4E09;&#x89D2;&#x5F62;&#x4E4B;&#x7F8E;">7.2 CSS&#x4E09;&#x89D2;&#x5F62;&#x4E4B;&#x7F8E;</h3>
<pre><code class="lang-css"> <span class="hljs-selector-tag">div</span> {

     <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>; 

    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">line-height</span>:<span class="hljs-number">0</span>&#xFF1B;
    font-size: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">10px</span> solid red;

    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">10px</span> solid green;

    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">10px</span> solid blue;

    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">10px</span> solid <span class="hljs-number">#000</span>; 

 }
</code></pre>
<p>&#x4E00;&#x5F20;&#x56FE;&#xFF0C; &#x4F60;&#x5C31;&#x77E5;&#x9053; css &#x4E09;&#x89D2;&#x662F;&#x600E;&#x4E48;&#x6765;&#x7684;&#x4E86;, &#x505A;&#x6CD5;&#x5982;&#x4E0B;&#xFF1A;</p>
<ol>
<li>&#x6211;&#x4EEC;&#x7528;css &#x8FB9;&#x6846;&#x53EF;&#x4EE5;&#x6A21;&#x62DF;&#x4E09;&#x89D2;&#x6548;&#x679C;</li>
<li>&#x5BBD;&#x5EA6;&#x9AD8;&#x5EA6;&#x4E3A;0</li>
<li>&#x6211;&#x4EEC;4&#x4E2A;&#x8FB9;&#x6846;&#x90FD;&#x8981;&#x5199;&#xFF0C; &#x53EA;&#x4FDD;&#x7559;&#x9700;&#x8981;&#x7684;&#x8FB9;&#x6846;&#x989C;&#x8272;&#xFF0C;&#x5176;&#x4F59;&#x7684;&#x4E0D;&#x80FD;&#x7701;&#x7565;&#xFF0C;&#x90FD;&#x6539;&#x4E3A; transparent &#x900F;&#x660E;&#x5C31;&#x597D;&#x4E86;</li>
<li>&#x4E3A;&#x4E86;&#x7167;&#x987E;&#x517C;&#x5BB9;&#x6027; &#x4F4E;&#x7248;&#x672C;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#xFF0C;&#x52A0;&#x4E0A; font-size: 0;  line-height: 0;</li>
</ol>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="../6/1.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: 9">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"10","level":"1.10","depth":1,"previous":{"title":"9","level":"1.9","depth":1,"path":"6/1.md","ref":"6/1.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"7/1.md","mtime":"2020-11-12T14:10:24.814Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-11-12T14:12:15.513Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

